<!--  -->
<template>
  <div class="">
    <h2>首页面</h2>
    <ul>
      <!--根据路径 -->
      <li>
        <router-link :to="{ path: '/home/A' }" tag="button"
          >A组件</router-link
        >
      </li>
      <!-- 根据命名名称 -->
      <li>
        <router-link
          :to="{ name: 'A', query: { id: 2, name: '李四' } }"
          tag="button"
          >A组件</router-link
        >
      </li>
      <li>
        <router-link to="/home/A?id=1&name=张三" tag="button"
          >A组件</router-link
        >
      </li>

      <li>
        <router-link to="/home/B/3/王五" tag="button">B组件</router-link>
      </li>
      <!-- 根据params -->
      <li>
        <router-link
          :to="{ name: 'B', params: { id: '4', name: '赵六' } }"
          tag="button"
          >B组件</router-link
        >
      </li>


      <!-- <li><router-link to="/home/C" tag="button">C组件</router-link></li> -->
      <!-- 根据params -->
      <li>
        <router-link
          :to="{
            name: 'C',
            params: { id: '7', name: '土鸡' },
          }"
          tag="button"
          >C组件</router-link>
      </li>
    </ul>


    <router-view></router-view>
    
    <input type="text" />
  </div>
</template>

<script>
export default {
  name: "Index",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>